<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>发药单</title>
    <style>
      @media print {
        html,body {
          margin: 0;
          padding: 3mm;
          font-size: 0.5mm;
        }
        @page {
          size: A5 landscape;
          margin: 0mm;
        }
        #app {
          width: 100%;
          height: 100%;
        }
        .box-p {
          height: 100%;
          width: 100%;
          box-sizing: border-box;
          overflow: hidden;
        }
        .top-head {
          display: flex;
          align-items: center;
        }
        .top-head > div:nth-child(1) {
          flex-shrink: 0;
          width: 40mm;
        }
        .top-head > div:nth-child(2) {
          flex-grow: 1; 
          text-align: center;
        }
        .top-head > div:nth-child(3) {
          flex-shrink: 0;
          width: 40mm;
          text-align: right;
        }
        .logo {
          width: 40mm;
          height: 9mm;
          display: block;
        }
        .nr {
          width: 100%;
          height: 95mm;
          margin-top: 2mm;
          border: 0.1mm solid black;
          padding: 3mm;
          box-sizing: border-box;
        }
        .drug-table {
          width: 100%;
          border: none;
        }
        .drug-table th {
          text-align: left;
        }
        .drug-table tbody tr {
          height: 6mm;
        }
        .nr-item {
          width: 20%;
          display: inline-block;
          text-align: center;
          margin-bottom: 2mm;
          overflow: hidden;
        }
      }
    </style>
  </head>
  <body>
    <section id="app">
      <template v-if="type=='xi'">
        <div v-for="(item,index) in drug" :key="index" class="box-p">
          <!-- 西药 -->
          <div class="top-head">
            <div>
              <img :src="hospital.logo" class="logo" alt="" />
            </div>
            <div>
              <div style="font-size:4mm;">{{ hospital.name }}</div>
              <div style="margin-top: 1mm;">发药单</div>
            </div>
            <div>
              [西药]
            </div>
          </div>
          <table style="width:100%;border:none;margin-top:2mm;">
            <tr style="height: 6mm;">
              <td>档案号：{{ patient.archivesCode }}</td>
              <td>科室：{{ hospital.professionalDeptName }}</td>
              <td>费别：非医保</td>
              <td>开方日期：{{ hospital.time }}</td>
            </tr>
            <tr style="height: 6mm;">
              <td>姓名：{{ patient.name }}</td>
              <td>性别：
                {{patient.sex ==1?'男':(patient.sex ==2?'女':'不详')}}
              </td>
              <td>
                年龄：<span v-if="patient.age>17">{{ patient.age }}岁</span
                ><span v-else>{{patient.birthday|toAge}}</span>
              </td>
            </tr>
          </table>

          <div class="nr">
            <div style="margin-bottom:2mm;">Rp</div>
            <table class="drug-table">
              <thead>
                <tr>
                  <th>组号</th>
                  <th>药品名称</th>
                  <th>规格</th>
                  <th>剂量</th>
                  <th>用法</th>
                  <!-- <th>取药地</th> -->
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in item.list" :key="index">
                  <td>{{ item.groupId }}</td>
                  <td>{{ item.medicalDrugVO.drugName }}</td>
                  <td>{{ item.medicalDrugVO.specs }}</td>
                  <td>
                    {{ item.oneDose }}{{ toEnum(item.oneDoseUnit, doseUnitEnum)
                    }}
                  </td>
                  <td>
                    {{ toEnum(item.use, useEnum) }}/{{ toEnum(item.frequency,
                    frequencyEnum) }}/共{{ item.useDay }}天
                  </td>
                  <!-- <td>1</td> -->
                  <td>
                    {{ item.payStatus == 1 ? "已收费" : "未收费" }}/{{
                    item.status == 1 ? "已发药" : "未发药" }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <table style="width:100%;border:none;">
            <tr>
              <td>开单医生：{{ hospital.doctor }}</td>
              <td>配药药师：</td>
              <td>核对发药：{{ todispenser("xi", item) }}</td>
              <td>药师审核：</td>
            </tr>
          </table>
        </div>
      </template>
      <div v-else>
        <div class="top-head">
          <div>
            <img :src="hospital.logo" class="logo" alt="" />
          </div>
          <div>
              <div style="font-size:4mm;">{{ hospital.name }}</div>
              <div style="margin-top: 1mm;">发药单</div>
          </div>
          <div>
            [中药]
          </div>
        </div>
        <table style="width:100%;border:none;margin-top:2mm;">
          <tr style="height: 6mm;">
            <td>档案号：{{ patient.archivesCode }}</td>
            <td>科室：{{ hospital.professionalDeptName }}</td>
            <td>费别：非医保</td>
            <td>开方日期：{{ hospital.time }}</td>
          </tr>
          <tr style="height: 6mm;">
            <td>姓名：{{ patient.name }}</td>
            <td>性别：{{ patient.sex == 1 ? "男" : "女" }}</td>
            <td>年龄：{{ patient.age }}岁</td>
          </tr>
        </table>

        <div class="nr">
          <div style="margin-bottom:2mm;">Rp</div>
          <div v-for="(item,index) in drug" class="nr-item">
            {{ item.medicalDrugVO.drugName }}{{ item.oneDose }}{{
            toEnum(item.oneDoseUnit, doseUnitEnum) }}
          </div>
        </div>
        <table style="width:100%;border:none;">
          <tr>
            <td>开单医生：{{ hospital.doctor }}</td>
            <td>发药药师：{{ todispenser("zhong", drug) }}</td>
            <td>操作员：{{ operatorUser }}</td>
          </tr>
        </table>
      </div>
    </section>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          hospital: {},
          patient: {},
          type: "",
          doseUnitEnum: [],
          useEnum: [],
          frequencyEnum: [],
          operatorUser: "",
          drug: [],
          pageSize: 5
        },
        filters: {
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (
                mouth == 1 ||
                mouth == 3 ||
                mouth == 5 ||
                mouth == 7 ||
                mouth == 8 ||
                mouth == 10 ||
                mouth == 12
              ) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
            // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
            // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

            return dateStr;
          }
        },
        mounted() {
          var th = this;
          window.addEventListener("message", function(e) {
            var json = e.data;
            th.hospital = json.hospital;
            th.patient = json.patient;
            th.type = json.type;
            th.operatorUser = json.operatorUser;
            th.doseUnitEnum = json.doseUnitEnum;
            th.drug = [];
            //西药根据组号显示
            if (json.type == "xi") {
              th.useEnum = json.useEnum;
              th.frequencyEnum = json.frequencyEnum;
              var totalDrug = json.drug;
              //循环加将同一组号放在一起
              // for (var index = 0; index < json.drug.length; index++) {
              //   var element = json.drug[index];
              //   // //查找发药药师
              //   // if (!th.dispenserName.includes(element.dispenserName)) {
              //   //   th.dispenserName.push(element.dispenserName);
              //   // }
              //   var trueBo = false; //是否找到同组号

              //   for (var i = 0; i < totalDrug.length; i++) {
              //     var totalDrugItem = totalDrug[i];
              //     if (totalDrugItem.groupId == element.groupId) {
              //       trueBo = true;
              //       break;
              //     }
              //   }
              //   if (trueBo) {
              //     totalDrugItem.list.push(element);
              //   } else {
              //     totalDrug.push({ groupId: element.groupId, list: [element] });
              //   }
              // }
              th.getPage(totalDrug);
            } else {
              th.drug = json.drug;
            }
            th.isLoadImg();
          });
        },
        methods: {
          //解析处方单子(西药)
          getPage(array) {
            var th = this;
            var fn = function(groupArr) {
              var arr = [];
              var list = [];
              //如果是7的倍数就第二页
              for (var index = 0; index < groupArr.length; index++) {
                var item = groupArr[index];
                var priceDisplay = Number.parseFloat(item.priceDisplay);
                arr.push(item);
                var i = index + 1;
                if (i % th.pageSize == 0) {
                  list.push({
                    list: arr
                  });
                  arr = [];
                }
              }
              if (arr.length > 0) {
                list.push({ list: arr });
              }
              th.drug.push(...list);
            };
            fn(array);
          },
          toEnum(value, arr) {
            var th = this;
            var str = "";
            for (var index = 0; index < arr.length; index++) {
              var element = arr[index];
              if (element.id == value) {
                str = element.desc;
                break;
              }
            }
            return str;
          },
          //获取药师
          todispenser(type, obj) {
            var th = this;
            var arr = [];
            //西药
            if (type == "xi") {
              obj.list.forEach(element => {
                if (arr.indexOf(element.dispenserName) == -1) {
                  arr.push(element.dispenserName);
                }
              });
            } else {
              obj.forEach(element => {
                if (arr.indexOf(element.dispenserName) == -1) {
                  arr.push(element.dispenserName);
                }
              });
            }
            return arr.join(",");
          },
          isLoadImg() {
            //这里要判断图片是否加载完成
            var imgs = document.getElementsByTagName("img");
            var timer = setInterval(() => {
              var i = 0;
              for (var index = 0; index < imgs.length; index++) {
                var element = imgs[index];
                if (element.complete) {
                  i++;
                }
              }
              if (i == imgs.length) {
                clearInterval(timer);
                window.print();
              }
            }, 500);
          }
        }
      });
    </script>
  </body>
</html>
